<template>
  <div class="Shopping">
    <meta name="referrer" content="no-referrer" />
    <div class="Shopping-header" >
    
      <div class="Shopping-logo" style="margin-left: 150px; margin-top: 10px;">
        <img src="@/assets/logo.png" alt=""  style="width: 90px; margin-left: 40px;">
  <br>
  <span style="font-size: 24px; color: #66CDAA ;margin-left:60px;">赣选</span>
      </div>
      <div class="Shopping-search"  style="line-height: 150px">
        <el-input   placeholder="瑞金咸鸭蛋" style="width: 200px;border: 3px solid  #66CDAA; border-radius: 5px; margin-left: 700px" />
  <el-button type="primary" style="background-color: #66CDAA;;" >搜索</el-button>

        
      </div>
    </div>
    <div class="Shopping-banner" style="margin: 0 auto; width: 1200px; ">
      <div class="Shoping-banner-head">
        <input type="checkbox" :checked="isAllCheck" @click="selectedAll">全选
  <span style="margin-left: 300px;">商品</span>
  <span style="margin-left: 300px;">单价</span>
  <span style="margin-left: 100px;">数量</span>
  <span style="margin-left: 155px;">小计</span>
  <span style="margin-left: 80px;">操作</span>
      </div>
      <div class="Shopping-banner-shangping" v-for="(item,index) in shangping" :key="index"> 
    <div class="Shopping-checkbox"><input type="checkbox" :checked="item.check" @change="selectedcheck(index)" > </div>
    <div class="Shopping-img"><img :src="item.photo" width="200" height="200"></div>
    <div class="Shopping-miaoshu">{{item.name }}</div>
    <div class="Shopping-danjia">￥{{item.price }}</div>
<div class="Shopping-xuanze"> <el-input-number v-model="item.num" :min="1" :max="100"/></div>
    <div class="Shopping-xiaojie">￥{{(item.price)*(item.num) }}</div>
   <div class="Shopping-caozuo">
    <el-button style="background-color: #66CDAA; color: white;"  @click="remove(index)">删除</el-button></div>
      </div>
    </div>
    <div class="Shopping-jiesuan" style="margin: 0 auto ; width: 200px; height: 40px; line-height: 40px; border: 2px solid #66CDAA; text-align: center;margin-top: 30px; border-radius: 5px;">
      合计：￥{{totalPrice}}
     <el-button style="background-color: #66CDAA; color: white;"  >结算</el-button>
    </div>
  </div>
</template>

<script>
import axios from '@/utils/request';
import {useUserStore} from '@/stores/user'

export default {
name:'MyShopping',
data() {
  return {
       isAllCheck: false,
       length:'',
       num:1,
       zongjia:0,
       books: [
                    { img:require('@/assets/ganyu.jpg'),miaoshu:'甘雨一只' ,num:1, danjia:28,check: false },
                    { img:require('@/assets/ganyu.jpg'),miaoshu:'甘雨一只' ,num:1, danjia:28,check: false },
                    { img:require('@/assets/ganyu.jpg'),miaoshu:'甘雨一只' ,num:1, danjia:28,check: false },
                    { img:require('@/assets/ganyu.jpg'),miaoshu:'甘雨一只' ,num:1, danjia:28,check: false },
                    { img:require('@/assets/ganyu.jpg'),miaoshu:'甘雨一只' ,num:1, danjia:28,check: false },
                         
                ],
                shangping:[]
   }

},
methods:{
  selectedAll() {
    this.isAllCheck=!this.isAllCheck
    for(let i=0;i<this.shangping.length;i++)
    {
      this.shangping[i].check=this.isAllCheck
    }
},
selectedcheck(index){
  this.isAllCheck=true
this.shangping[index].check=!this.shangping[index].check
for(let i=0;i<this.shangping.length;i++)
    {
     if(this.shangping[i].check!=true)
     {this.isAllCheck=false}
     
    }
},
remove(index){
  this.shangping.splice(index, 1)
},
//后端版本
getdingdan(){
  const user=useUserStore();
  console.log(user.userInfo.userinformation.id);
    axios.post('/personal/selshopcart',JSON.stringify(user.userInfo.userinformation.id)).then(res=>{
 if(res.code===200){
  console.log(res);
    this.shangping=res.data
    this.length=this.shangping.length
    console.log(res.data);
 }
  })
}
},
mounted(){
this.getdingdan()
},
computed:{
 
	totalPrice(){
		let result=0;
		for(var i=0;i<this.length;i++){
if(this.shangping[i].check)
			result+=parseInt(this.shangping[i].price)*parseInt(this.shangping[i].num)
		}
		return result
	}
}


}

</script>

<style>
.Shopping{
  margin: 0 auto;
  /* width: 1200px; */
  /* background-color: pink; */
  /* text-align: center; */
}
.Shoping-banner-head {
  /* float: left; */
  line-height: 50px;
  height: 50px;
  margin-top: 20px;
  background-color: white;
  width: 1200px;
  border: 2px solid #66cdaa;
  border-radius: 5px;
}
.Shopping-header{
  background-color: white;
  display: flex;
  border: 3px solid #66cdaa;
  border-radius: 5px;
}
/* .Shopping-banner-shangping div{ */
  /* display: inline-block; */
  /* float: left; */
  /* display: flex; */
  /* background-color: sandybrown; */
/* } */
.Shopping-banner-shangping{
  line-height: 200px;
  margin-top: 20px;
  display: flex;
  text-align: left; 
  width: 1200px;
  height: 200px;
  background-color: white;
  border: 5px solid #66cdaa;
  border-radius: 10px;
}
.Shopping-checkbox{
 /* margin-top: 80px; */
margin-left: 40px;
}
.Shopping-img{
  margin-left: 90px;
  /* margin-top: 30px; */
}
.Shopping-miaoshu{
 
  margin-left: 20px;
  /* margin-top: 80px; */
}
.Shopping-danjia{
 
  margin-left: 240px;
  /* margin-top: 80px; */
}
.Shopping-xuanze{
 
  margin-left: 50px;
  /* margin-top: 75px; */
}
 .Shopping-xiaojie{ 
   margin-left: 85px;
  /* margin-top: 80px;  */
} 
/* .Shopping-caozuo{   
  float: left;

} */
</style>